<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta charset="utf-8">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>商城首页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="css/iconfont/iconfont.css" rel="stylesheet" th:href="@{css/iconfont/iconfont.css}"/>
    <link href="css/common.css" rel="stylesheet" th:href="@{css/common.css}"/>
    <link href="css/home.css" rel="stylesheet" th:href="@{css/home.css}"/>
    <style>
        .list-wrap {
            display: block;
            padding: 5px 5px;
            line-height: 40px;
            color: #333;
            font-size: 14px;

        }
        .double{
            column-count: 2;
            column-gap: 20px; /* 设置列之间的间隔为20像素 */
        }

        .list-wrap img {
            float: left;
            margin-right: 12px;
            width: 40px;
            height: 40px;
        }
    </style>
</head>
<body>
<!--头部-->
<!--引入通用头部代码片段-->
<th:block th:include="header"/>

<div class="header-wrap">
    <div class="header wrapper">
        <a href="" class="logo">
            <img src="/img/logo3.png" alt=""/>
        </a>
        <div class="header-schbox">
            <div class="inner clearfix">
                <form action="" method="">
                    <input class="search-txt" id="key" name="key" placeholder="搜书">
                    <button class="search-btn" id="search" type="button"></button>
                </form>
            </div>

        </div>
    </div>
</div>
<div class="nav-box">
    <div class="nav wrapper">
        <div class="slogan"></div>
        <ul class="nav-ul">
            <li><a href="">首页</a></li>
        </ul>
        <div class="nav-ad"><a class="ad" href=""><img src="" alt=""/></a></div>
    </div>
</div>
<!--头部-->

<div class="side-category" style="display: none;">
    <div class="side-category-tit">全品分类</div>
    <div class="side-category-bd">
    </div>
    <div class="side-category-ft" data-action="category-toggle">
        <span class="label tohide">收起导航</span>
        <span class="label toshow">展开导航</span>
    </div>
</div>

<div class="home-full-banner">
    <a href="" class="item"><img data-lazy="uploads/img.png" alt=""/></a>
    <a href="" class="item"><img data-lazy="uploads/img_1.png" alt=""/></a>
    <a href="" class="item"><img data-lazy="uploads/img_2.png" alt=""/></a>
</div>

<div class="gray-box">
    <div class="wrapper">
        <!--  -->
        <div class="flash-sale-section">

        </div>

    </div>
</div>





<!--脚部-->
</body>
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="js/slick/slick.css"/>
<script src="js/slick/slick.min.js"></script>
<script src="js/global.js"></script>
<script th:src="@{/js/ajax.js}"></script>
<script th:src="@{/js/index.js}"></script>
<script>
    $('.home-full-banner').slick({
        autoplay: true,
        autoplaySpeed: 5000,
        arrows: false,
        dots: true,
        fade: true
    });

    +function () {
        var bigH = $('.side-category').height();
        $(window).on('scroll resize load', function () {
            var sTop = $(this).scrollTop(),
                valve = $('.home-full-banner').offset().top + $('.home-full-banner').height(),
                wH = $(this).height();

            //控制导航显示
            if (sTop > valve) {
                $('.side-category').show();
            } else {
                $('.side-category').hide();
            }
        })
    }();
    zAction.add({
        'category-toggle': function () {
            if ($(this).hasClass('on')) {
                $(this).removeClass('on').prev().slideDown(200);
            } else {
                $(this).addClass('on').prev().slideUp(200);
            }
        },

    });

</script>
</html>